@charset "utf-8";
@import "loader";
@import "config";
@import "rem-calc";
// @import "animation/_scale-bigger";
// @import "animation/_scale-bigger-fadein";
// @import "animation/_rotate360";
// @import "animation/_slide-up-out";
// @import "animation/_fadein";
// @import "animation/_fadein06";
// @import "animation/_fadeout";
// @import "animation/_slideup";
// @import "animation/_slidedown";
// @import "animation/_slide-in-left";
// @import "animation/_slide-out-right";
// @import "animation/_fadein-out-half";

.ui-toast{
  color: red;
}

.preimg{
  display: none;
  img{
    display: none;
  }
}

// ===== BEGIN: added by ourself ==== //
*,:after,:before {
    box-sizing: inherit;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

html {
    font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
    text-size-adjust: 100%; /* 2 */
    box-sizing: border-box;
    height: 100%;
    user-select:none;
    overflow-x: hidden;
    overflow-y: scroll;
}

body {
    height: 100%;
    margin: 0 auto;
    font-size: $rem-base;
    background-color: #fff;
}

ul,p,h1,h2,h3,h4,h5,h6,dd {margin: 0}
ul{list-style:none;padding:0}
i,dfn,em{font-style: normal}
b{font-weight: normal}
input{outline: none;}

.viewport{
  width: 100%;
  min-height: 100%;
  overflow: auto;
}
.enterIn {
  -webkit-animation-name: moveIn;
  -webkit-animation-duration: .3s;
  -webkit-animation-delay: .8s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
}
.enterScale,.enterScale1,.enterScale2 {
  -webkit-animation-name: scale;
  -webkit-animation-duration: .3s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: both;
}
.enterScale{
  -webkit-animation-delay: .8s;
}
.enterScale1 {
  -webkit-animation-delay: .6s;
}
.enterScale2 {
  -webkit-animation-delay: 1.2s;
}
.bounceInUp{
  -webkit-animation:bounceInUp .8s -0.2s ease both 2;
}
.bounceOutUp{
  -webkit-animation:bounceUp .6s ease-out both infinite;
}
.flash{
  -webkit-animation:flash 2s .4s ease both infinite;
}
.moveRT {
  -webkit-animation-name: moveRT;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: .8s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
}
.moveB {
  opacity: 0;
  -webkit-animation-name: moveB;
  -webkit-animation-duration: 1s;
  -webkit-animation-delay: 1.2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes bounceUp{
  0%{
    -webkit-transform:translateY(-10%)
  }
  100%{
    -webkit-transform:translateY(10%)
  }
}
@-webkit-keyframes bounceInUp{
  0%{
    -webkit-transform:translateY(2%)
  }
  20%{
    -webkit-transform:translateY(-2%)
  }
  40%{
    -webkit-transform:translateY(1%)
  }
  60%{
    -webkit-transform:translateY(-2%)
  }
  80%{
    -webkit-transform:translateY(1%)
  }
  100%{
    -webkit-transform:translateY(0)
  }
}

@-webkit-keyframes fadeout{
  0%{opacity: 1;}
  100%{opacity: 0;}
}

@-webkit-keyframes flash{
  0%,50%,100%{opacity: 1;}
  25%,75%{opacity: 0;}
}

@-webkit-keyframes moveIn {
  0% {
    -webkit-transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(10%);
  }
}

@-webkit-keyframes moveRT {
  10% {
    -webkit-transform: translate3d(10%,-10%,0);
  }
  20% {
    -webkit-transform: translate3d(0%,0%,0);
  }
}

@-webkit-keyframes moveB {
  60%{
    opacity: .8;
  }
  85%{
    opacity: 0;
  }
  90% {
    -webkit-transform: translate3d(0,100%,0);
  }
  100% {
    -webkit-transform: translate3d(0,0,0);
  }
}

@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }

  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}

.direction_arrow{
  z-index: 99;
  width: rem-calc(70px);
  height: rem-calc(70px);
  background: url('#{$imgsrc}arrow.png') no-repeat 0 center;
  background-size: contain;;
  position: fixed;
  bottom: 1rem;
  left: 50%;
  margin-left: rem-calc(-35px);
  text-align: center;
  @at-root .showForm &{
    display: none;
  }
  &:before{
    // content: '点击';
  }
}

.wiggle {
  -webkit-animation-name: wiggle;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-timing-function: linear;
}

@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(-3deg);
  }

  50% {
    -webkit-transform: rotate(0deg);
  }

  75% {
    -webkit-transform: rotate(3deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
  }
}

.contain{
  position: absolute;
  top: 0;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .switch_music{
    width: rem-calc(50px);
    height: rem-calc(50px);
    background: url('#{$imgsrc}btn_music.png') no-repeat 0 0;
    background-size: rem-calc(50px) auto;
    position: absolute;
    z-index: 499;
    top: rem-calc(12px);
    right: rem-calc(12px);
    &.on{
      background-position: 0 rem-calc(-51px);
    }
    audio{
      opacity: 0;
      visibility: hidden;
    }
  }
  .view {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: none;
    .ani{
      -webkit-animation-play-state: paused;
    }
    .form{
      display: none;
    }
    .bg{
      background-size: 100% 100%;
      background-position: center center;
      background-repeat: no-repeat;
      width: 100%;
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      /* bottom: 0; */
      z-index: 1;
    }
    &.startAni{
      display: block;
      .ani{
        -webkit-animation-play-state: running;
      }
    }
    &.showForm{
      .form{
        display: block;
      }
    }
    .form{
      background-color: rgba(0,0,0,.9);
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      z-index: 19;
      display: none;
      .area{
        margin-top: rem-calc(-50px);
        width: rem-calc(350px);
        height: rem-calc(465px);
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%,-50%,0);
      }
      .qa{
        li{
          width: 100%;
          height: rem-calc(150px);
          &.selected{
            background: url('#{$imgsrc}selected.png') no-repeat right center;
            background-size: contain;
          }
        }
        & + .areabtn{
          width: rem-calc(207px);
          height: rem-calc(98px);
          background: url('#{$imgsrc}ensure.png') no-repeat 0 0;
          background-size: contain;
          text-indent: -9999px;
          overflow: hidden;
          margin: 2rem auto;
        }
      }
    }
    &.view1 {
      text-align: center;
      z-index: 99;
      .area{
        margin-top: 0;
        width: rem-calc(316px);
        height: rem-calc(543px);
        background-image: url('#{$imgsrc}02/02_5.png');
        input,.select{
          width: rem-calc(112px);
          height: rem-calc(30px);
          line-height: normal;
          border: 0 none;
          left: rem-calc(160px);
          position: absolute;
          z-index: 9;
          font-size: rem-calc(24px);
        }
        input{
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          background: none;
          &:nth-of-type(1){
            top: rem-calc(115px);
          }
        }
        .select{
          // padding-left: rem-calc(50px);
          // -webkit-appearance:none;
          background: none;
          &:nth-of-type(1){
            top: rem-calc(202px);
          }
          &:nth-of-type(2){
            top: rem-calc(283px);
          }
        }
        .select_arrow{
          width: rem-calc(17px);
          height: rem-calc(11px);
          background-image: url('#{$imgsrc}select.png');
          background-repeat: no-repeat;
          background-size: contain;
          position: absolute;
          right: rem-calc(52px);
          z-index: 3;
          &:nth-of-type(1){
            top: rem-calc(212px);
          }
          &:nth-of-type(2){
            top: rem-calc(294px);
          }
        }
        .areabtn{
          width: rem-calc(188px);
          height: rem-calc(85px);
          text-indent: -9999px;
          overflow: hidden;
          position: relative;
          left: rem-calc(53px);
          top: rem-calc(394px);
          position: absolute;
          z-index: 9;
        }
      }
      .bg{
        top: 0;
        bottom: 0;
        background-image: url('#{$imgsrc}02/02_bg.jpg');
      }
      .tip1{
        width: rem-calc(315px);
        height: rem-calc(230px);
        background: url('#{$imgsrc}02/02_1.png') no-repeat;
        background-size: contain;
        position: absolute;
        left: 50%;
        top: 1rem;
        margin-left: rem-calc(-158px);
        z-index: 9;
      }
      .material1{
        width: rem-calc(185px);
        height: rem-calc(90px);
        background: url('#{$imgsrc}02/02_2.png') no-repeat;
        background-size: contain;
        position: absolute;
        right: 1rem;
        bottom: 6rem;
        z-index: 9;
      }
      .material2{
        width: rem-calc(360px);
        height: rem-calc(299px);
        background: url('#{$imgsrc}02/02_3.png') no-repeat;
        background-size: contain;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: rem-calc(-100px) 0 0 rem-calc(-185px);
        z-index: 9;
      }
      .material3{
        width: rem-calc(42px);
        height: rem-calc(63px);
        background: url('#{$imgsrc}02/02_4.png') no-repeat;
        background-size: contain;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: rem-calc(-100px) 0 0 rem-calc(120px);
        z-index: 9;
      }

    }
    &.view2 {
      z-index: 89;
      .bg{
        top: 0;
        bottom: 0;
        background-image: url('#{$imgsrc}03/03_bg.jpg');
      }
      .tip1{
        width: rem-calc(230px);
        height: rem-calc(168px);
        background: url('#{$imgsrc}03/03_1.png') no-repeat;
        background-size: contain;
        position: absolute;
        left: 50%;
        top: 1rem;
        margin-left: rem-calc(-115px);
        z-index: 9;
      }
      .material1{
        width: rem-calc(175px);
        height: rem-calc(164px);
        background: url('#{$imgsrc}03/03_2.png') no-repeat;
        background-size: contain;
        position: absolute;
        top: 10rem;
        left: 50%;
        margin-left: rem-calc(-106px);
        z-index: 9;
      }
      .material2{
        width: rem-calc(55px);
        height: rem-calc(62px);
        background: url('#{$imgsrc}03/03_3.png') no-repeat;
        background-size: contain;
        position: absolute;
        top: rem-calc(6px);
        right: rem-calc(-60px);
        z-index: 9;
      }
      .material3{
        width: rem-calc(285px);
        height: rem-calc(298px);
        background: url('#{$imgsrc}03/03_4.png') no-repeat;
        background-size: contain;
        position: absolute;
        bottom: rem-calc(40px);
        left: 50%;
        margin-left: rem-calc(-142px);
        z-index: 9;
      }
      .material4 {
        background-image: url('#{$imgsrc}03/03_5.png');
        background-size: 100% auto;
        background-position: center 0;
        background-repeat: no-repeat;
        height: rem-calc(63px);
        width: rem-calc(67px);
        overflow: hidden;
        display: block;
        position: relative;
        left: rem-calc(18px);
        top: 50%;
        margin-top: rem-calc(-30px);
        z-index: 9;
      }
      .noteAni {
        -webkit-animation-name: note;
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: normal;
        -webkit-animation-timing-function: steps(2);
        @at-root{
          @-webkit-keyframes note {
            0% {
              background-position: center 0;
            }
            100% {
              background-position: center rem-calc(-130px);
            }
          }
        }
      }
      .form{
        .area{
          background-image: url('#{$imgsrc}03/03_answer.png');
        }
      }
    }
    &.view3 {
      z-index: 79;
      .bg{
        top: 0;
        bottom: 0;
        background-image: url('#{$imgsrc}04/04_bg.jpg');
      }
      .tip1{
        width: rem-calc(287px);
        height: rem-calc(150px);
        background: url('#{$imgsrc}04/04_1.png') no-repeat;
        background-size: contain;
        position: absolute;
        left: 50%;
        top: 1rem;
        margin-left: rem-calc(-144px);
        z-index: 9;
      }
      .material1{
        width: rem-calc(290px);
        height: rem-calc(435px);
        background: url('#{$imgsrc}04/04_2.png') no-repeat;
        background-size: 100% auto;
        position: absolute;
        top: 12rem;
        left: 50%;
        margin-left: rem-calc(-145px);
        z-index: 9;
        &.face1Ani {
          -webkit-animation-name: face1;
          -webkit-animation-duration: .5s;
          -webkit-animation-iteration-count: infinite;
          -webkit-animation-direction: normal;
          -webkit-animation-timing-function: steps(2);
          @at-root{
            @-webkit-keyframes face1 {
              0% {
                background-position: center 0;
              }
              100% {
                background-position: center rem-calc(-872px);
              }
            }
          }
        }
      }
      .form{
        .area{
          background-image: url('#{$imgsrc}04/04_answer.png');
        }
      }
    }
    &.view4 {
      z-index: 69;
      .bg{
        top: 0;
        bottom: 0;
        background-image: url('#{$imgsrc}05/05_bg.jpg');
      }
      .tip1{
        width: rem-calc(281px);
        height: rem-calc(181px);
        background: url('#{$imgsrc}05/05_1.png') no-repeat;
        background-size: contain;
        position: absolute;
        left: 50%;
        top: 1rem;
        margin-left: rem-calc(-141px);
        z-index: 9;
      }
      .material1{
        width: rem-calc(360px);
        height: rem-calc(458px);
        background: url('#{$imgsrc}05/05_face.png') no-repeat;
        background-size: 100% auto;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: rem-calc(-180px);
        z-index: 9;
        &.face2Ani {
          -webkit-animation-name: face2;
          -webkit-animation-duration: .5s;
          -webkit-animation-iteration-count: infinite;
          -webkit-animation-direction: normal;
          -webkit-animation-timing-function: steps(2);
          @at-root{
            @-webkit-keyframes face2 {
              0% {
                background-position: center 0;
              }
              100% {
                background-position: center rem-calc(-920px);
              }
            }
          }
        }
      }
      .form{
        .area{
          background-image: url('#{$imgsrc}05/05_answer.png');
        }
      }
    }
    &.view5 {
      z-index: 59;
      .bg{
        top: 0;
        bottom: 0;
        background-image: url('#{$imgsrc}06/06_bg.jpg');
      }
      .tip1{
        width: rem-calc(302px);
        height: rem-calc(151px);
        background: url('#{$imgsrc}06/06_1.png') no-repeat;
        background-size: contain;
        position: absolute;
        left: 50%;
        top: 1rem;
        margin-left: rem-calc(-151px);
        z-index: 9;
      }
      .material1{
        width: rem-calc(332px);
        height: rem-calc(365px);
        background: url('#{$imgsrc}06/06_2.png') no-repeat;
        background-size: 100% auto;
        position: absolute;
        margin-top: rem-calc(-150px);
        top: 50%;
        left: 0;
        z-index: 9;
        &.face3Ani {
          -webkit-animation-name: face3;
          -webkit-animation-duration: .5s;
          -webkit-animation-iteration-count: infinite;
          -webkit-animation-direction: normal;
          -webkit-animation-timing-function: steps(2);
          @at-root{
            @-webkit-keyframes face3 {
              0% {
                background-position: center rem-calc(-1px);
              }
              100% {
                background-position: center rem-calc(-733px);
              }
            }
          }
        }
      }
      .form{
        .area{
          background-image: url('#{$imgsrc}06/06_answer.png');
        }
      }
    }
    &.view6 {
      z-index: 49;
      .bg{
        top: 0;
        bottom: 0;
        background-image: url('#{$imgsrc}07/07_bg.jpg');
      }
      .tip1{
        width: rem-calc(302px);
        height: rem-calc(151px);
        background: url('#{$imgsrc}07/07_1.png') no-repeat;
        background-size: contain;
        position: absolute;
        left: 50%;
        top: 1rem;
        margin-left: rem-calc(-151px);
        z-index: 9;
      }
      .material1{
        width: rem-calc(352px);
        height: rem-calc(364px);
        background: url('#{$imgsrc}07/07_2.png') no-repeat;
        background-size: 100% auto;
        position: absolute;
        bottom: 6rem;
        left: 50%;
        margin-left: rem-calc(-176px);
        z-index: 9;
        &.face4Ani {
          -webkit-animation-name: face4;
          -webkit-animation-duration: .5s;
          -webkit-animation-iteration-count: infinite;
          -webkit-animation-direction: normal;
          -webkit-animation-timing-function: steps(2);
          @at-root{
            @-webkit-keyframes face4 {
              0% {
                background-position: center 0;
              }
              100% {
                background-position: center rem-calc(-728px);
              }
            }
          }
        }
      }
      .form{
        .area{
          background-image: url('#{$imgsrc}07/07_answer.png');
        }
      }
    }
  }
  .view7 {
      position: relative;
      height: 100%;
      width: 100%;
      overflow: hidden;
      z-index: 39;
      background-color: #fff;
      .table{
        position: absolute;
        width: rem-calc(331px);
        height: rem-calc(543px);
        top: 50%;
        left: 50%;
        background-image: url('#{$imgsrc}08/08_1.jpg');
        background-size: contain;
        transform: translate(-50%,-50%);
        .hz{
          width: 100%;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%,-100%);
          text-align: center;
          .name{
            max-width: rem-calc(220px);
            font-size: rem-calc(28px);
            height: rem-calc(35px);
            line-height: rem-calc(35px);
            display: inline-block;
            vertical-align: middle;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .wz{
            width: rem-calc(49px);
            height: rem-calc(35px);
            display: inline-block;
            vertical-align: middle;
            background-image: url('#{$imgsrc}08/08_2.jpg');
            background-size: contain;
          }
        }
        .cell1{
          position: absolute;
          text-align: center;
          left: rem-calc(71px);
          top: rem-calc(72px);
          width: rem-calc(85px);
          font-size: rem-calc(18px);
          transform: rotate(-5deg);
        }
        .cell2{
          position: absolute;
          text-align: center;
          left: rem-calc(228px);
          top: rem-calc(56px);
          width: rem-calc(90px);
          font-size: rem-calc(16px);
          transform: rotate(-4deg);
        }
        .cell3{
          position: absolute;
          text-align: left;
          left: rem-calc(75px);
          top: rem-calc(140px);
          width: rem-calc(210px);
          height: rem-calc(140px);
          overflow: hidden;
          font-size: rem-calc(16px);
          line-height: 1.2;
          transform: rotate(-2deg);
        }
        .cell4{
          position: absolute;
          text-align: left;
          left: rem-calc(75px);
          top: rem-calc(318px);
          width: rem-calc(210px);
          height: rem-calc(66px);
          overflow: hidden;
          font-size: rem-calc(14px);
          line-height: 1.2;
          transform: rotate(-1deg);
        }
        .treat{
          width: rem-calc(156px);
          height: rem-calc(130px);
          position: absolute;
          left: rem-calc(6px);
          bottom: rem-calc(6px);
        }
        .restart{
          width: rem-calc(130px);
          height: rem-calc(120px);
          position: absolute;
          left: rem-calc(182px);
          bottom: rem-calc(12px);
        }
      }
    }
    .view8{
      position: relative;
      height: 100%;
      width: 100%;
      overflow: hidden;
      z-index: 29;
      background-color: #fff;
      .table{
        position: absolute;
        width: rem-calc(327px);
        height: rem-calc(583px);
        top: 50%;
        left: 50%;
        background-image: url('#{$imgsrc}09/09_bg.jpg');
        background-size: contain;
        transform: translate(-50%,-50%);
        .qrcode{
          width: rem-calc(195px);
          height: rem-calc(195px+64px);
          left: rem-calc(60px);
          top: rem-calc(75px);
          position: absolute;
          padding: rem-calc(64px) 0 0;
        }
      }
    }
}
